<template>
  <div class="release">
    <img src="/src/assets/course/step-complete.png" alt="发布">
    <h2>您的课程<span>【{{ courseInfo.courseName }}】</span>已创建完成！</h2>
    <el-button type="primary" :disabled="!!courseInfo.status" :loading="loading" @click="release">{{ courseInfo.status ? '课程已发布' : '发布课程' }}</el-button>
    <el-button type="text" @click="close(true)">返回课程列表</el-button>
  </div>
</template>

<script lang="ts">
import { ref, inject, computed } from 'vue';
import store from '@/views/course/update/store';
import $,{emitter} from '$';
import { ElMessage } from 'element-plus';

export default {
  setup() {
    let close: any = inject('close');

    let courseInfo = computed(() => store.state.courseInfo);

    let loading = ref(false)

    const release = async () => {
      loading.value = true;
      let res = await $.http.post('/course/changePublishStatus', { courseId: courseInfo.value.id, status: 1 });
      ElMessage[res.result ? 'success' : 'warning'](res.result ? '课程发布成功~！' : res.msg);
      close(true);
    }

    const goBack = ()=>{
      close()
    }
    return { close, courseInfo, release, loading }
  }
}
</script>

<style lang="scss" scoped>
.release {
  background: #fff;
  border-radius: 6px;
  padding: 120px 100px;
  & > * {
    display: block;
    margin: 0 auto;
  }
  img {
    width: 200px;
  }
  h2 {
    margin: 50px 0 30px;
    font-size: 20px;
    text-align: center;
  }
  .el-button:last-of-type {
    margin-top: 10px;
  }
}
</style>